<!--
 * @Author: Leng
 * @Date: 2021-02-02 11:42:37
 * @Description: 换肤操作
 * @FilePath: \vue-leng\src\views\home\index.vue
-->

<template>
  <div class="themeContent">
    <div class="btn">
      <p v-for="index in 3" :key="index" @click="changeTheme(`theme${index}`)" :class="`theme${index}`"></p>
    </div>
    <!-- demo   -->
    <div class="skContent">
      <div class="skBtn" @click="goVueLeng">查看vue-leng的demo</div>
      <div class="bgImg"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'mine'
}
</script>
<script setup>
import { ref } from "vue"
const title = '我的'
const showBack = ref(false)
const changeTheme = theme => window.document.documentElement.setAttribute("data-theme", theme)
const goVueLeng = () => window.location.href = 'http://tb3706666.gitee.io/vue-leng-demo'
</script>
<style scoped lang="scss">
@import "../../assets/scss/base.scss";

.themeContent {
  .btn {
    width: 100%;
    display: inline-block;
  }

  p {
    @include px2rem(width, 100px);
    @include px2rem(height, 100px);
    @include px2rem(margin, 20px);
    float: left;
    cursor: pointer;
  }

  .theme1 {
    background-color: red;
  }

  .theme2 {
    background-color: #652BF5;
  }

  .theme3 {
    background-color: deepskyblue;
  }

  .skContent {
    @include defaultBlock;
    @include bgcolor($background-color-theme);

    .skBtn {
      padding: 8px 10px;
      @include bgdcolor(yellow);
    }

    .bgImg {
      margin-top: 20px;
      width: 100px;
      height: 100px;
      @include bgimg('');
    }
  }

  .select-svg {
    width: 100px;
    height: 100px;
  }
}
</style>